<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* UGCWasm (https://iclient.supermap.io/web/libs/ugcwasm/1.0.1/UGCWasmAll.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_ugcConvexHull"></title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background: #fff;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 280px;
        text-align: center;
        z-index: 10000;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="toolbar" class="panel panel-primary">
      <div class="panel-heading">
        <h5 class="panel-title text-center">计算</h5>
      </div>
      <div class="panel-body content">
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">计算</span>
            <select id="operation" class="form-control">
              <option value="computeConvexHull">凸多边形</option>
              <option value="computeConvexHullPoints">点集凸闭包</option>
              <option value="computeConcaveHullPoints">点集凹闭包</option>
            </select>
          </div>
        </div>
        <input type="button" class="btn btn-default" value="计算" onclick="cal()" />&nbsp;
        <input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
    <script type="text/javascript" include="ugcwasm" src="../../dist/ol/include-ol.js"></script>
    <script>
      var map, pointLists, layer;
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var url = host + '/iserver/services/map-world/rest/maps/World';
      ol.supermap
        .initMap(url, {
          viewOptions: {
            center: [120, 30],
            zoom: 6
          }
        })
        .then((res) => {
          map = res.map;
          addMarker();
        });

      function addMarker() {
        const point1 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [118, 30]
          }
        };
        const point2 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [125, 31]
          }
        };
        const point3 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [123, 28]
          }
        };
        const point4 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [117, 32]
          }
        };
        const point5 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [120, 34]
          }
        };
        const point6 = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [120, 30]
          }
        };
        pointLists = [point1, point2, point3, point4, point5, point6];
        pointLists.forEach((point) => {
          addLayer(point);
        });
      }

      function addLayer(geojson) {
        var source = new ol.source.Vector({
          features: [new ol.format.GeoJSON().readFeature(geojson)],
          wrapX: false
        });
        var layer = new ol.layer.Vector({
          source: source,
          style: new ol.style.Style({
            image: new ol.style.Circle({
              radius: 8,
              fill: new ol.style.Fill({
                color: 'red'
              })
            }),
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 3
            }),
            fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
            })
          })
        });
        map.addLayer(layer);
        return layer;
      }

      function cal() {
        clearLayer();
        var geometryAnalysis = new ol.supermap.GeometryAnalysis();
        const operationFun = document.getElementById('operation').value;
        let calRes;
        const pointsCoors = pointLists.map((point) => point.geometry.coordinates);
        if (operationFun === 'computeConvexHull') {
          calRes = geometryAnalysis[operationFun](pointsCoors);
        } else {
          calRes = geometryAnalysis[operationFun](pointLists);
        }
        layer = addLayer(calRes);
      }

      function clearLayer() {
        if (!map || !layer) {
          return;
        }
        map.removeLayer(layer);
      }
    </script>
  </body>
</html>
